<template>
  <div class="product-quality-search-setting">
    <div class="product-quality-search-main" v-loading="pendding">

      <div class="product-quality-search-select-item">
        <div class="product-quality-search-switch-item">
          <div class="document-select-title">
            <h4>{{$t('product.setting.productQualitySearch.open')}}</h4>
            <div>{{$t('product.setting.productQualitySearch.openTips')}}</div>
          </div>
          <el-switch
            v-model="openProductQualitySearch"
            @change="editTenantConfig"
            :active-text="openProductQualitySearch ? $t('common.base.enable') : $t('common.base.disable')"
          ></el-switch>
        </div>
        <div class="product-quality-search-header-row" v-if="openProductQualitySearch">
          
          <div>
            <el-button class="mr-20" type="primary" @click="informationConfigurationDialogVisible = true">{{$t('product.setting.productQualitySearch.configTip')}}</el-button>
            <span>{{$t('product.setting.productQualitySearch.searchLink')}}：</span>
            <el-input
              v-trim:blur
              disabled
              class="task-select-search-input input-with-append-search task-mr12"
              :value="productQualitySearchConfig.url"
            >
              <el-button type="primary" slot="append" @click="onCopy(productQualitySearchConfig.url)"
              >{{$t('common.base.copy')}}</el-button>
            </el-input>
            <!-- 华大基因专属英文链接 start-->
            <template v-if="isBgiPrivate">
              <span>{{$t('product.setting.productQualitySearch.enLink')}}：</span>
              <el-input
                v-trim:blur
                disabled
                class="task-select-search-input input-with-append-search task-mr12"
                :value="productQualitySearchConfig.enUrl"
                style="margin-top:16px;"
              >
                <el-button type="primary" slot="append" @click="onCopy(productQualitySearchConfig.enUrl)"
                >{{$t('common.base.copy')}}</el-button>
              </el-input>
            </template>
            <!-- 华大基因专属英文链接 end-->
          </div>

          <div class="product-quality-search-item">
            <div class="search-content">
              <span>{{$t('product.setting.productQualitySearch.tips1')}}：</span>
              <el-select 
                class="search-content-select mr-20"
                v-model="productQualitySearchConfig.searchFields" 
                placeholder=""
                multiple
                @change="editTenantConfig"
              >
                <el-option
                  v-for="item in searchFields"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
            <div class="search-tips">
              <span>{{$t('product.setting.productQualitySearch.tips2')}}：</span>
              <el-input v-model="searchTips.value" @blur="getSearchTips" placeholder=""></el-input>
              <base-select-language 
                v-if="isOpenMultiLanguage && isShow"
                :title="$t('common.base.description')"
                :field="field"
                :is-require="false"
                :defaultOption="{
                  formType: 'text',
                }"
                :maxlength="optionMaxLength"
                defaultFormType="text"
                :defaultValue="searchTips.value"
                :defaultValueLanguage="productQualitySearchConfig.placeHolder"
                @save="saveLanguage"
              >
              </base-select-language>
              <!-- <el-button @click="editTenantConfig" class="ml-20" type="primary">{{$t('common.base.save')}}</el-button> -->
            </div>
          </div>
        </div>
      </div>
    </div>

    <base-modal :title="$t('product.setting.productQualitySearch.configDialogTitle')" :show.sync="informationConfigurationDialogVisible" width="528px" class="product-quality-search-dialog">
      <el-table
        :data="informationConfigurationData"
        stripe
        border
        :highlight-current-row="false"
        header-row-class-name="base-table-header-v3"
        row-class-name="base-table-row-v3"
        ref="productQualitySearchTable"
      >
        <el-table-column
          v-for="(column, index) in configurationColumns"
          :key="`${column.field}_${index}`"
          :label="column.label"
          :prop="column.field"
          :width="column.width"
          :min-width="column.minWidth || '120px'"
          :align="column.align"
          :fixed="column.fixed"
        >
          <template slot-scope="scope">
            <template v-if="column.field === 'setting'">
              <el-radio-group v-model="scope.row[column.field]" :disabled="scope.row.disabled">
                <el-radio :label="true">{{$t('common.base.display')}}</el-radio>
                <el-radio :label="false">{{$t('common.base.hide')}}</el-radio>
              </el-radio-group>
            </template>
            <template v-else>
              <span>{{scope.row[column.field]}}</span>
            </template>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer">
        <el-button
          @click="informationConfigurationDialogVisible = false"
          size="small"
        >{{$t('common.base.cancel')}}</el-button>
        <el-button
          type="primary"
          @click="saveInformationConfiguration()"
          size="small"
        >{{$t('common.base.save')}}</el-button>
      </div>
    </base-modal>
  </div>
</template>

<script>
import ContactUserItem from "@src/component/common/BaseContact/ContactUserItem.vue";

import _ from 'lodash';
import { languagesList, isMultiLangModules } from '@src/component/util/multiLang/index';
import { getOpenMultiLanguage } from '@hooks/useFormMultiLanguage'

import locales, { t } from '@src/locales'
import i18n from '@src/locales'
import { setClipboardData } from '@src/util/dom';
import Platform from '@src/platform'
import * as GuideMessage from '@src/model/const/Alert.ts'
import { getRootWindow } from '@src/util/dom'

import {
  SELECT_OPTION_LENGTH_MAX
} from '@src/component/form/config'
import {
  getTenantConfig,
  editTenantConfig
} from '@src/api/ProductV2Api';

export default {
  name: "product-quality-search",
  components: {
    ContactUserItem,
  },
  inject: ['initData'],
  data() {
    const isOpenMultiLanguage = getOpenMultiLanguage()
    return {
      pendding: false,
      languagesList,
      isOpenMultiLanguage,
      field: {},
      options: {},
      // 所有设置项
      tenantConfig: {},
      productQualitySearchConfig: {
        placeHolder: {},
        searchFields: [],
        showFields: {},
        url: ''
      },
      informationConfigurationData: [
        {
          label: i18n.t('product.setting.productQualitySearch.label1'),
          filed: 'serialNumber',
          setting: true,
        },
        {
          label: i18n.t('product.setting.productQualitySearch.label2'),
          filed: 'name',
          setting: true,
          disabled: true
        },
        {
          label: i18n.t('product.setting.productQualitySearch.label3'),
          filed: 'type',
          setting: true,
        },
        {
          label: i18n.t('product.setting.productQualitySearch.label4'),
          filed: 'qualityStartTime',
          setting: true,
        },
        {
          label: i18n.t('product.setting.productQualitySearch.label5'),
          filed: 'qualityEndTime',
          setting: true,
        },
        {
          label: i18n.t('product.setting.productQualitySearch.label6'),
          filed: 'qualityStatus',
          setting: true,
        },
        {
          label: i18n.t('product.setting.productQualitySearch.label7'),
          filed: 'serviceProject',
          setting: true,
        }
      ],
      configurationColumns: [
        {
          label: i18n.t('product.setting.productQualitySearch.column1'),
          field: 'label'
        },
        {
          label: i18n.t('product.setting.productQualitySearch.column2'),
          field: 'setting'
        }
      ],
      informationConfigurationDialogVisible: false,
      openProductQualitySearch: true,
      searchSettingUrl: '',
      searchTips: { value: '' },
      searchFieldsValue: ['serialNumber'],
      searchFields: [{ label: i18n.t('product.setting.productQualitySearch.searchField1'), value: 'serialNumber' }, { label: i18n.t('product.setting.productQualitySearch.searchField2'), value: 'qrCodeNo' }]
    };
  },
  computed: {
    // 显示多语言配置
    isShow() {
      return true
    },
    // 字段长度
    optionMaxLength(){
      return SELECT_OPTION_LENGTH_MAX
    },
    guideMessage() {
      return GuideMessage
    },
    // 华大基因私有灰度
    isBgiPrivate() {
      const RootWindow = getRootWindow(window);
      return Boolean(RootWindow.grayAuth?.bgiPrivate) || false;
    }
  },
  watch: {
  },
  mounted() {
    this.getTenantConfig()
  },
  methods: {
    saveLanguage(data){
      this.productQualitySearchConfig.placeHolder = data
      this.searchTips.value = data[locales.locale]
      this.editTenantConfig()
    },
    onCopy(text) {
      setClipboardData(
        text,
        () => {
          this.$message.success(this.$t('common.base.tip.copySuccess'));
        },
        () => {
          this.$message.warning(this.$t('common.base.tip.copyFail'));
        }
      );
    },
    buildParams() {
      try {
        let showFields = {}
        this.informationConfigurationData.forEach(item => {
          showFields[item.filed] = item.setting
        })
        this.productQualitySearchConfig.showFields = showFields

        this.productQualitySearchConfig.placeHolder[locales.locale] = this.searchTips.value
        return {
          configCode: 'PRO_QUALITY_INFO_SEARCH',
          isOpen: Number(this.openProductQualitySearch),
          configNumValue: 0,
          configStrValue: JSON.stringify(this.productQualitySearchConfig)
        }
      } catch(error) {
        console.error(error)
      }
    },
    // 获取配置
    async getTenantConfig() {
      try {
        let { data, succ, message } = await getTenantConfig({ configCode: ['PRO_QUALITY_INFO_SEARCH'] });
        if(!succ) return this.$message.error(message);

        data.forEach(item => {
          this.tenantConfig[item.configCode] = item
        })

        if(this.tenantConfig?.PRO_QUALITY_INFO_SEARCH) {
          this.openProductQualitySearch = !!this.tenantConfig.PRO_QUALITY_INFO_SEARCH.isOpen
          this.productQualitySearchConfig = JSON.parse(this.tenantConfig.PRO_QUALITY_INFO_SEARCH.configStrValue)
          this.searchTips.value = this.productQualitySearchConfig?.placeHolder?.[locales.locale] || ''

          const showFields = this.productQualitySearchConfig.showFields
          this.informationConfigurationData.forEach(item => {
            item.setting = showFields[item.filed]
          })
        }
        
      } catch(error) {
        console.error(error)
      }
    },
    getSearchTips() {
      if(!this.searchTips.value) {
        return this.$message.warning(this.$t('product.setting.productQualitySearch.tips3'));
      }
      this.editTenantConfig()
    },
    // 保存配置
    async editTenantConfig() {
      try {
        const params = this.buildParams()
        let { data, succ, message } = await editTenantConfig([params]);
        if(!succ) return this.$message.error(message);

        this.$message.success(this.$t('common.base.tip.saveSuccess'));

        this.getTenantConfig()
      } catch(error) {
        console.error(error)
      }
    },
    saveInformationConfiguration() {
      this.informationConfigurationDialogVisible = false
      this.editTenantConfig()
    },
  },
};
</script>

<style lang="scss" scoped>
.product-quality-search-setting {
  display: flex;
  min-height: 100vh;
  padding: 12px;
  min-width: 880px;

  .product-quality-search-main {
    margin-left: 13px;
    padding: 20px;
    width: 100%;
    background: #ffffff;
    border-radius: 4px;
  }

  .product-quality-search-switch-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }
  .product-quality-search-table-header {
    background-color: #f5f5f5 !important;
  }
  .product-quality-search-table {

    .product-quality-search-table-header th {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      background-color: #f5f5f5 !important;
    }

    i {
      cursor: pointer;
      font-size: 13px;
      color: #909399;
    }
  }

  .product-quality-search-select-item {
    .product-quality-search-header-row {
      width: 100%;
      background-color: #FAFAFA;
      border-radius: 8px;
      padding: 20px;
      .product-quality-search-item {
        min-width: 800px;
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: 16px;
      }
      .search-content {
        width: 550px;
        .search-content-select {
          width: 50%;
        }
      }
      .search-tips {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 40%;
        .el-input {
          width: 60%;
        }
      }
      .base-select-container .list-wrapper {
        height: 200px;
      }
      .mr-20 {
        margin-right: 20px;
      }
      .ml-20 {
        margin-left: 10px;
      }
    }
  }
}

h4 {
  padding: 10px 0px;
  font-size: 15px;
}

::v-deep .el-checkbox__label {
  font-size: 0;
  & > span {
    vertical-align: auto;
    font-size: 14px;
    font-weight: 400;
    color: #595959;
    line-height: 22px;
  }
  .el-icon-question {
    position: relative;
    vertical-align: auto;
    font-size: 14px;
    color: #595959;
    margin: 0 8px;
  }
}

.product-quality-search-dialog {
  ::v-deep .base-modal-body {
    padding: 20px;
  }
}
</style>
